<template>
  <div class="menu-wrap" v-show="visible">
    <ul class="menu-list" :class="wrapClass">
      <li v-for="(item,index) in list" :key="index"  @click="operate(item.value,index)">{{item.label}}</li>
    </ul>
    <div class="menu-layer" @click="visible=false"></div>
  </div>
</template>

<script>
import Vue from "vue";
export default {
  name: "menuList",
  data() {
    return {
      visible: false,
    };
  },

  props: {
    wrapClass: String,
    list: Array
  },
  methods: {
    operate(v,index) {
      this.visible=false;
      this.$emit("itemClick", v,index);
    },
    show() {
      this.visible = true;
    },
    hide() {
     this.visible = false;
    },
  },
};
</script>
<style lang='scss'>
@import "menuList";
</style>
